
var gl;
var points;

window.onload = function init()
{
    var canvas = document.getElementById( "gl-canvas" );
    
    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }


    //  Configure WebGL

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
    
    createHead(gl);
    createBody(gl);
    createHand(gl);
    createFoot(gl);
};

/**
 * 颜色转换函数
 */
function colorConvert(color) {
    var color_convert = [];
    for (var i = 0; i < 4; i++) {
        color_convert[i] = (color[i] / 255.0);
    }
    return color_convert;
}


/**
 * android 机器人头部, 使用椭圆制作, 椭圆圆心为 0, 0.42
 */
function createHead(gl) {
    var vertex_head = [
        0.0, 0.42
    ];
    var pi = Math.PI;
    
    for(var i = 0; i <= 100; i++) {
        vertex_head = vertex_head.concat([0.3*Math.cos(pi * i / 100), 0.42 + 0.26*Math.sin(pi * i / 100)]);
    } 
    vertex_head.numsize = 102;

    var vertex_color = [];

    var color = colorConvert([0xEA, 0x43, 0x35, 0xFF]); // RED

    for(var i = 0; i <= 102; i++) {
        vertex_color = vertex_color.concat(color);
    }
    
    console.log(vertex_head);
    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    drawScene(program, vertex_head, vertex_color, gl.TRIANGLE_FAN);

    var head_line_right = [
        0.205, 0.61,
        0.32, 0.76
    ];

    var head_line_left = [
        -0.205, 0.61,
        -0.32, 0.76
    ];
    //program = initShaders(gl, "vertex-shader", "fragment-shader");
    drawLines(program, head_line_right, vertex_color);
    drawLines(program, head_line_left, vertex_color);
};

/**
 * android 机器人身体, 为矩形
 */
function createBody(gl) {
    var vertex_body = [
        -0.3, -0.4,
        -0.3, 0.4,
        0.3, 0.4,
        0.3, -0.4
    ];
    vertex_body.numsize = 4;
    
    var vertex_color = [];
    var color = colorConvert([0xFB, 0xBC, 0x05, 0xFF]); // YELLOW

    for(var i = 0; i <= 3; i++) {
        vertex_color = vertex_color.concat(color);
    }
    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    drawScene(program, vertex_body, vertex_color, gl.TRIANGLE_FAN);
};

/**
 * 此函数为画线函数,  传入顶点坐标与颜色
 * @parm vertex_line 线段起始坐标
 * @parm vertex_colors 线段颜色
 */
function drawLines(program, vertex_line, vertex_colors) {
    gl.useProgram(program);
    
    var cBuffer = gl.createBuffer();

    var cBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertex_colors), gl.STATIC_DRAW);

    var vColor = gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);

    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertex_line), gl.STATIC_DRAW);

    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    gl.lineWidth(4);
    gl.drawArrays(gl.LINES, 0, 2);
};

/**
 * 通过左上角与右下角的坐标确定矩形, 并将制作好的向量返回
 */
function createRect(top_left, bottom_right) {

    var rect_points = [];
    rect_points = rect_points.concat([top_left[0], bottom_right[1]]);
    rect_points = rect_points.concat([top_left[0], top_left[1]]);
    rect_points = rect_points.concat([bottom_right[0], top_left[1]]);
    rect_points = rect_points.concat([bottom_right[0], bottom_right[1]]);
    return rect_points;
}
/** 
 * android 机器人手部, 两个矩形
 */
function createHand(gl) {

    var vertex_hand_left = createRect([-0.42, 0.3], [-0.32, -0.2]);
    vertex_hand_left.numsize = 4;

    var vertex_hand_right = createRect([0.42, 0.3], [0.32, -0.2]);
    vertex_hand_right.numsize = 4;

    
    var vertex_color = [];
    var color = colorConvert([0x34, 0xA8, 0x53, 0xFF]);  // GREEN

    for(var i = 0; i <= 3; i++) {
        vertex_color = vertex_color.concat(color);
    }

    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    drawScene(program, vertex_hand_left, vertex_color, gl.TRIANGLE_FAN);
    //program = initShaders(gl, "vertex-shader", "fragment-shader");
    drawScene(program, vertex_hand_right, vertex_color, gl.TRIANGLE_FAN);
};

/**
 * android 机器人脚部 两个矩形
 */
function createFoot(gl) {

    var vertex_foot_left = createRect([-0.2, -0.42], [-0.1, -0.64]);
    vertex_foot_left.numsize = 4;

    var vertex_foot_right = createRect([0.2, -0.42], [0.1, -0.64]);
    vertex_foot_right.numsize = 4;

    
    var vertex_color = [];
    var color = colorConvert([0x42, 0x85, 0xF4, 0xFF]); // Blue

    for(var i = 0; i <= 3; i++) {
        vertex_color = vertex_color.concat(color);
    }

    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    drawScene(program, vertex_foot_left, vertex_color, gl.TRIANGLE_FAN);
    //program = initShaders(gl, "vertex-shader", "fragment-shader");
    drawScene(program, vertex_foot_right, vertex_color, gl.TRIANGLE_FAN);

};

/**
 * 绘制函数, 调用此函数是, 首先需要创建program对象并传入,
 * @parm vertex_pointer 要绘制的顶点数据, 同时定中也要有numsize对象
 * @parm vertex_colors  要绘制的顶点颜色
 * gltype 绘制方式, 可选的有gl.TRIANGLES, gl.TRIANGLE_FAN ...
 */
function drawScene(program, vertex_pointer, vertex_colors, gltype) {
    gl.useProgram(program);

    var cBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertex_colors), gl.STATIC_DRAW);

    var vColor = gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);

    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertex_pointer), gl.STATIC_DRAW);

    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    gl.drawArrays(gltype, 0, vertex_pointer.numsize);
};
